<template>
	<view class="key">
		<p-navbar title="添加API"></p-navbar>
		<view class="key-title" v-for="(item,index) in keylist" :key="index" @tap="api(item)">
			<view class="key-display1"><image class="flex-image" :src="item.image" mode="aspectFill"></image></view>
			<view class="key-display2">
				<view class="">
					<view style="line-height: 60rpx;font-weight: 600;">{{item.name}}</view>
					<view class="view-text" style="line-height: 45rpx;">支持币币，USDT本位合约交易</view>
				</view>
				<image src="../../static/key.png" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 模态框 -->
		<u-popup v-model="show" mode="bottom" class="popup">
			<view class="pop">安全验证</view>
			<view class="form" style="padding: 0 20rpx;">
				<view class="item" v-for="(item,index) in prson" :key="index" style="border-bottom:2rpx solid #E6E6E6;padding-top: 20rpx;">
					<view class="label">{{ item.label }}</view>
					<view class="content">
						<input class="input" :placeholder="item.msg" :maxlength="item.len" :type="item.type" v-model="form[item.key]"
						 @keyup.enter="fnRegister" />
						<view class="password" :class="{ show: showPsw }" @tap="fnPsw(index)"></view>
					</view>
				</view>
			</view>
			<view class="submit">
				<u-button type="primary" ripple shape="circle" :loading="loading" @click="fnRegister">确 定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,//模态框
				display:false,//密码text or password
				loading:false,//按钮防止多次点击
				password:'',//安全密码
				imgurl:{//密码图片
					show:'/static/login-psw-show.png',
					hide:'/static/login-psw-hide.png',
				},
				keylist:[],//列表
				keyvalue:{},//选中参数
				form:{},
				showPsw: false,
				prson: [{
					key: 'password',
					label: '安全密码',
					msg: '请设置您的安全密码',
					icon: 'password',
					type: 'password',
					len: 20
				}],
			};
		},
		onLoad() {
			this.request.post('terrace/list').then(res=>{//api列表
				this.keylist=res.data.data
			})
		},
		methods:{
			api(item){
				if(item.status=='0'){//平台状态 0关闭 1开启
					this.util.toast('平台暂未开发!')
					return ;
				}
				if(item.status2=='0'){//是否绑定平台 0未绑 1已绑
					this.$Router.push({path:'/pages/home/update',query:{type:item.id}})
					return ;
				}
				this.keyvalue=item
				this.show=true
			},
			fnPsw(i) { //密码隐藏显示
				this.showPsw = !this.showPsw;
				const type = this.prson[i].type
				this.$set(this.prson[i], 'type', type === 'password' ? 'text' : 'password')
			},
			fnRegister(){
				this.loading=true
				this.request.post(`userKey/selectByTerraceId?securityPassword=${this.form.password}&terraceId=${this.keyvalue.id}`).then(res=>{//api列表
					if(res.data.code=='1'){
						this.util.toast('验证成功','success')
						setTimeout(()=>{
							this.show=false;//关闭模态框
							this.form.password=null;//密码清空
							this.$Router.push({path:'/pages/home/update',query:{type:JSON.stringify(res.data.data)}})
						},1500)
					}
					this.loading=false
				})
			},
		}
	}
</script>

<style lang="scss">
	.key{
		margin: 20rpx 30rpx 0rpx;
	}
	.key-title{
		@include flex;
		justify-content: space-between;
		// border: 1px solid red;
		margin: 25rpx 0rpx;
		.key-display1{
			width: 20%;
			.flex-image{
				width: 88rpx;
				height: 88rpx;
				// border: 1px solid red;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}
		.key-display2{
			width: 80%;
			// line-height: 90rpx;
			padding: 0rpx 20rpx 20rpx 5rpx;
			border-bottom: 1rpx solid #E6E6E6;
			@include flex;
			justify-content: space-between;
			image{
				width: 20rpx;
				height: 20rpx;
			}
			.view-text{
				color: #333;
				font-size: 24rpx;
			}
		}
	}
	.pup{
		/deep/ .uni-scroll-view-content {
		    width: 100%;
		    height: 100%;
			background-color: $color-bgs;
			text-align: center;
			line-height: 80rpx;
			padding: 20rpx 0rpx 0rpx;
		}
	}
	.popup-title {
	  font-size: 34rpx;
	  // font-weight: bold;
	  color: #000000;
	  text-align: center;
	  line-height: 100rpx;
	  border-bottom: 1px solid $border;
	}
	// input{
	// 	background: #000000;
	// }
	.popup-name {
	  font-size: 30rpx;
	  // font-weight: bold;
	  color: #000000;
	  text-align: left;
	  padding-left: 20rpx;
	  line-height: 88rpx;
	}
	.popup-input {
		font-size: 30rpx;
	    // border: none;
		border-bottom: 1px solid $border ;
		border-top: 1px solid $color-bgs ;
		border-left: 1px solid $color-bgs ;
		border-right: 1px solid $color-bgs ;
	  	background: $color-bgs;
	  line-height: 100rpx;
	  width: 710rpx;
	  margin: 0 20rpx;
	  // color: #000000;
	}
	.password{
		position: absolute;
		right: 20rpx;
		top: 200rpx;
		image{
			width: 28rpx;
			height: 16rpx;
		}
	}
	.submit {
		margin: 10rpx 64rpx 40rpx;
		position: fixed;
		bottom: 0rpx;
		width: 83%;
	
		/deep/ .u-btn {
			background-color: $light-color;
			// box-shadow: 0 17rpx 40rpx rgba(#2196F3, .3);
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;
	
			&[disabled] {
				box-shadow: none !important;
				background-color: #D7D7D7 !important;
			}
			
		}
		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}
	.popup {
		/deep/ .u-drawer-bottom {
			bottom: 0;
			left: 0;
			right: 0;
			height: 420rpx !important;
			background-color: $color-bgs !important;
		}
	}
	.pop {
		// width: 100%;
	
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		// padding: 0rpx 30rpx 0rpx 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid $border;
		text-align: center;
		// color: #000000;
	
		text {
			float: right;
			padding-right: 40rpx;
			font-size: 24rpx;
			color: #999999;
			// padding-left: 20%;
		}
	}
	.form {
		padding: 0 40rpx;
		// background: #000000;
		background-color: $color-bgs !important;
		border-radius: 12rpx;
		margin: 0rpx 0rpx;
	}
	.item {
			padding-top: 40rpx;
	
			.content {
				@include flex;
			}
	
			.label {
	
				font-family: PingFang;
				font-weight: bold;
				color: #000000;
				height: 40rpx;
				font-size: 28rpx;
	
				background-size: 36rpx 40rpx;
				background-position: 0 center;
				background-repeat: no-repeat;
				// line-height: 40rpx;
			}
	
			.input {
				color: #000000;
				font-size: 26rpx;
				height: 100rpx;
				padding: 0 30rpx 0 0rpx;
				flex: 1;
				background: none;
				border: none;
				outline: none;
			}
	
			.password {
				width: 32rpx;
				height: 30rpx;
				@include background;
				margin-right: 50rpx;
				@include click;
				background-image: url(../../static/user/login-psw-hide.png);
				background-size: 100%;
				margin-top: 5rpx;
	
				&.show {
					color: red;
					background-image: url(../../static/user/login-psw-show.png);
					// @include background;
				}
			}
	
			.code {
				padding: 0rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				line-height: 50rpx;
				color: $light-color;
				margin-right: 30rpx;
				@include click;
			}
		}
	
</style>
